{{extend './common/layout.html'}} {{block 'main'}} {{include './common/header.html'}}
<!-- 主体内容 -->
<div class="content">
    {{include './common/aside.html'}}
    <div class="main">
        <!-- 分类标题 -->
        <div class="title">
            <h4>5b9a716cb2d2bf17706bcc0a</h4>
        </div>
        <!--
		enctype 指定表单数据的编码类型
			application/x-www-form-urlencoded
				name=zhangsan&age=20
			multipart/form-data 将表单数据编码成二进制类型
            -->
        <!-- /分类标题 -->
        <form class="form-container" action="{{link}}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label>标题</label>
                <input value="{{ article && article.title }}" type="text" class="form-control" placeholder="请输入文章标题" name="title">
            </div>
            <div class="form-group">
                <label>作者</label>
                <input value="{{@article?article.author:userInfo._id}}" name="author" type="text" class="form-control" readonly>
            </div>
            <div class="form-group">
                <label>发布时间</label>
                <input value="{{ article && dateFormat(article.publishDate,'yyyy-mm-dd') }}" name="publishDate" type="date" class="form-control">
            </div>

            <div class="form-group">
                <label for="exampleInputFile">文章封面</label>
                <!--
                  multiple 允许用户一次性选择多个文件
                  -->
                <input type="file" name="cover" id="file">
                <div class="thumbnail-waper">
                    <img class="img-thumbnail" src="{{article && article.cover}}" id="preview">
                </div>
            </div>
            <div class="form-group">
                <label>内容</label>
                <textarea name="content" class="form-control" id="editor">{{ article && article.content }}</textarea>
            </div>
            <div class="buttons">
                <input type="submit" value="{{button}}" class="btn btn-primary">
            </div>
        </form>
    </div>
</div>
<!-- /主体内容 -->
{{/block}} {{block 'script'}}
<script src="/lib/ckeditor5/ckeditor.js"></script>
<script type="text/javascript">
    let editor;
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error(error);
        });

    // 获取数据
    // const editorData = editor.getData();

    // 选择文件上传控件
    var file = document.querySelector('#file');
    var preview = document.querySelector('#preview');
    // 当用户选择完文件以后
    file.onchange = function() {
        // 1 创建文件读取对象
        var reader = new FileReader();
        // 用户选择的文件列表
        // console.log(this.files[0])
        // 2 读取文件
        reader.readAsDataURL(this.files[0]);
        // 3 监听onload事件
        reader.onload = function() {
            // 将文件读取的结果显示在页面中
            preview.src = reader.result;
        }
    }
</script>
{{/block}}